<%- include('common/header', {title: title}); %>
<div><a href="#">点击 A 标签</a></div>

<p>点击 P 标签</p>

<div>点击 DIV 标签</div>

<div style="margin-bottom: 30px;">
  <p>跳转链接</p>
  <a href="/demoA">跳转至demo A页面</a>
</div>

<button id="userId-event">模拟用户登录之后取到userId，存储起来，没有userId之前的作为游客身份，用设备Id是被</button>

<button id="customer-event">自定义事件，例如分享按钮</button>

<button id="error-event">模拟用户 http 接口 500 ，业务方触发</button>

<!--TODO 增加设备接口传参 USER-AGENT-->


<div>sdk 暴露了3个接口供业务方调用，分别是存储 userId ，自定义事件触发， http 请求错误事件触发</div>

<div>
  <button style="margin-top: 20px;padding: 5px 10px;" onclick="reload()">刷新</button>
</div>
<script>
  var customerEventDOM = document.getElementById('customer-event')
  var errorEventDOM = document.getElementById('error-event')
  var userIdEventDOM = document.getElementById('userId-event')

  customerEventDOM.onclick = function () {
    console.log('自定义事件')
    sdk.dispatch('customEvent', customerEventDOM, { extraInfo: 'extraInfo' })
  }

  errorEventDOM.onclick = function () {
    console.log('某个 http 接口返回 500 了')
    sdk.dispatch('httpError', errorEventDOM, { 'errorCode': 500 })
  }

  userIdEventDOM.onclick = function () {
    console.log('存储UserId')
    sdk.storeUserId('test1111')
  }

  function reload() {
    location.reload();
  }

</script>
<%- include('common/footer'); %>